<!--  -->
<template>
  <slot></slot>
</template>
<script lang='ts'>
import { defineComponent, inject, watch } from 'vue'
import { ECharts, EChartsOption } from 'echarts'
import * as echarts from 'echarts'
export default defineComponent({
  props: {
    value: {
      type: Number,
      default: 0,
    },
    color: {
      type: String,
      default: '#0ff',
    },
  },
  components: {},
  setup (props) {
    const echart = inject<ECharts>('echart')!
    const labelData = []
    const labelData1 = []
    for (var i = 0; i < 150; ++i) {
      labelData.push({
        value: 1,
        name: i,
        itemStyle: {
          normal: {
            color: 'rgba(0,209,228,0)',
          },
        },
      })
    }
    for (let i = 0; i < labelData.length; ++i) {
      if (labelData[i].name < 50) {
        labelData[i].itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                offset: 0,
                color: props.color,
              },
              {
                offset: 1,
                color: '#5467df',
              },
              ],
            ) as any,
          },

        }
      }
    }
    for (let i = 0; i < 150; ++i) {
      labelData1.push({
        value: 1,
        name: i,
        itemStyle: {
          normal: {
            color: 'rgba(0,209,228,0)',
          },
        },
      })
    }
    for (let i = 0; i < labelData1.length; ++i) {
      if (labelData1[i].name < 150) {
        labelData1[i].itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                offset: 0,
                color: '#251f45',
              },
              {
                offset: 1,
                color: '#251f45',
              },
              ],
            ) as any,
          },

        }
      }
    }
    const options = {
      title: [{
        text: props.value + '',
        top: 'center',
        left: 'center',
        textStyle: {
          fontSize: '25',
          fontWeight: '100',
          color: 'rgb(11, 164, 235)',
        },
      }],
      polar: {
        radius: ['56%', '52%'],
        center: ['50%', '50%'],
      },
      angleAxis: {
        max: 100,
        show: false,
      },
      radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,

        },
        axisTick: {
          show: false,
        },
      },
      series: [{
        name: '',
        type: 'bar',
        roundCap: true,
        barWidth: 60,
        showBackground: true,
        data: [80],
        coordinateSystem: 'polar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: '#585fe1',
            }, {
              offset: 1,
              color: '#0ff',
            }]),
          },
        },
      },
      {
        hoverAnimation: false,
        type: 'pie',
        z: 2,
        data: labelData,
        radius: ['43%', '50%'],
        zlevel: -2,
        itemStyle: {
          normal: {
            borderColor: '#180f2a',
            borderWidth: 2,
          },
        },
        label: {
          normal: {
            position: 'inside',
            show: false,
          },
        },
      },
      {
        hoverAnimation: false,
        type: 'pie',
        z: 1,
        data: labelData1,
        radius: ['43%', '50%'],
        zlevel: -2,
        itemStyle: {
          normal: {
            borderColor: '#180f2a',
            borderWidth: 2,
          },
        },
        label: {
          normal: {
            position: 'inside',
            show: false,
          },
        },
      },

      ],
    } as EChartsOption
    echart.setOption(options)
    watch(() => props.value, (v) => {
      echart.setOption({ title: [{ text: v + '' }] })
    })
    return {
      echart,
    }
  },
})

</script>
<style lang='scss' scoped>
</style>
